<div class="circle-loadding">
    <svg width="52" height="52" id="loadding">
        <circle r="6" cx="26" cy="6">
            <animate attributeName="r" values="0;6;6;6;0" begin="875ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="26;26;26;26;26" dur="875ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="6;6;6;6;6" dur="875ms" repeatCount="indefinite"></animate>
        </circle>
        <circle r="6" cx="12" cy="12">
            <animate attributeName="r" values="0;6;6;6;0" begin="750ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="12;12;12;12;12" begin="750ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="12;12;12;12;12" begin="750ms" dur="1000ms" repeatCount="indefinite"></animate>
        </circle>
        <circle r="6" cx="6" cy="26">
            <animate attributeName="r" values="0;6;6;6;0" begin="625ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="6;6;6;6;6" begin="625ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="26;26;26;26;26" begin="625ms" dur="1000ms" repeatCount="indefinite"></animate>
        </circle>
        <circle r="6" cx="12" cy="40">
            <animate attributeName="r" values="0;6;6;6;0" begin="500ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="12;12;12;12;12" begin="500ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="40;40;40;40;40" begin="500ms" dur="1000ms" repeatCount="indefinite"></animate>
        </circle>
        <circle r="6" cx="26" cy="46">
            <animate attributeName="r" values="0;6;6;6;0" begin="375ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="26;26;26;26;26" begin="375ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="46;46;46;46;46" begin="375ms" dur="1000ms" repeatCount="indefinite"></animate>
        </circle>
        <circle r="6" cx="40" cy="40">
            <animate attributeName="r" values="0;6;6;6;0" begin="250ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="40;40;40;40;40" begin="250ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="40;40;40;40;40" begin="250ms" dur="1000ms" repeatCount="indefinite"></animate>
        </circle>
        <circle r="6" cx="46" cy="26">
            <animate attributeName="r" values="0;6;6;6;0" begin="125ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="46;46;46;46;46" begin="125ms" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="26;26;26;26;26" begin="125ms" dur="1000ms" repeatCount="indefinite"></animate>
        </circle>
        <circle r="6" cx="40" cy="12">
            <animate attributeName="r" values="0;6;6;6;0" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cx" values="40;40;40;40;40" dur="1000ms" repeatCount="indefinite"></animate>
            <animate attributeName="cy" values="12;12;12;12;12"  dur="1000ms" repeatCount="indefinite"></animate>
        </circle>
    </svg>
</div>